<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            /* border: 20px solid pink; */
            position: relative;
            margin: 20px;

        }

        .small {
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
            border: 1px solid black;
            background-color: skyblue;
        }

        .small>img {
            width: 200px;
            height: 100%;
        }

        .mask {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 40px;
            height: 40px;
            background-color: grey;
            opacity: 0.2;
            cursor: copy;
        }

        .big {
            position: absolute;
            top: 0px;
            left: 250px;
            width: 200px;
            height: 200px;
            display: none;
            overflow: hidden;
            border: 1px solid black;
            background-color: pink;
        }

        .big img {
            width: 400px;
        }

        .box2 {
            margin-left: 20px;
            margin-top: -18px;
        }

        .small1 {
            width: 202px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            list-style: none;
        }

        .small1 img {
            width: 50px;
            height: 100%;
            border: 1px solid black;
            box-sizing: border-box;
        }

        .img1 {
            background-color: skyblue;
        }

        .img2 {
            background-color: wheat;
        }

        .img3 {
            background-color: springgreen;
        }

        .img4 {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="small">
            <img src="./img/cw1.png" alt="">
            <div class="mask"></div>
        </div>

        <div class="big">
            <img src="./img/cw1.png" alt="" id="b-img" class="acive">
            <img src="./img/cw2.png" alt="" id="b-img">
            <img src="./img/cw3.png" alt="" id="b-img">
            <img src="./img/cw4.png" alt="" id="b-img">
        </div>
    </div>
    <div class="box2">
        <div class="small1">
            <li><img src="./img/cw1.png" class="img1"></li>
            <li><img src="./img/cw2.png" class="img2"></li>
            <li><img src="./img/cw3.png" class="img3"></li>
            <li><img src="./img/cw4.png" class="img4"></li>

        </div>
    </div>
    <script>
        let mask = document.querySelector(".mask");
        let box = document.querySelector(".box");
        let small = document.querySelector(".small");
        let big = document.querySelector(".big");
        let bImg = document.querySelector("#b-img");

        small.addEventListener("mousemove", function (e) {
            let x = e.clientX - mask.clientWidth / 2 - 20;
            let y = e.clientY - mask.clientHeight / 2 - 20;
            mask.style.transform = `translate(${x}px,${y}px)`;
            //大图移动的距离
            var a = x * (bImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth);
            var b = y * (bImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth);

            //大图的移动（方向相反，故取负值)
            bImg.style.marginLeft = -a + "px";
            bImg.style.marginTop = -b + "px";

        });

        // 显示内容
        box.addEventListener("mousemove", function (e) {
            mask.style.display = "block";
            big.style.display = "block";
        });

        // 隐藏内容
        small.addEventListener("mouseleave", function (e) {
            mask.style.display = "none";
            big.style.display = "none";
        });


        let img = document.querySelector(".small1>li>img");
        let bigImg = document.querySelector(".big>img");
        let lastIndex = 0;
        img.forEach(function (item, index) {
            item.onclick = function () {
                list[lastIndex].classList.remove("active");
                item.classList.add("active");
                lastIndex = index;
                bigImg.forEach(function(item, index){
                    bigImg[index].style.display="none";
                    if(index==lastIndex){
                        bigImg[lastIndex].style.display="block";
                    }
                })
            }
        });
        
    </script>
</body>

</html>